<script lang="ts" context="module">
  import { Icon } from "@component/icons";
  import  { type Action, type CheckCellOptionTypeFunc, getCellContentType } from "./conf";
</script>

<script lang="ts">
  export let item: any = undefined;
  export let action: Action | undefined = undefined;
  export let icon: string | CheckCellOptionTypeFunc<string> = "";
  export let title: string | CheckCellOptionTypeFunc<string> = "";
  export let text : string | CheckCellOptionTypeFunc<string> = "";
  $: noAction = !action;
  $: iconName = getCellContentType(icon, item);
  $: buttonTitle = getCellContentType(title, item);
</script>

<div class="button-cell-container" title={buttonTitle}>
  <button
    class:noAction
    on:click|stopPropagation={() => action && action(item)}
  >
    {#if icon}
      <Icon name={iconName} size="sm+" className="ml-2" />
    {/if}
    {text}
  </button>
</div>

<style lang="postcss">
  .button-cell-container {
    @apply px-2 py-3 whitespace-nowrap;
  }
  .noAction {
    @apply cursor-default;
  }
</style>
